<template>
  <div class="dc-leader-home">
    <div class="dc-cards-wrapper">
      <div
        class="dc-card-item"
        v-for="item in cardData"
        :key="item.key"
        :class="`bg bg_${item.key}`"
      >
        <div>
          <label>{{ item.title }}</label>
          <countTo
            :startVal="0"
            :endVal="Number(item.value)"
            class="value"
          ></countTo>
        </div>
        <div>
          <span
            >{{ item.label1 }}
            <countTo
              v-if="item.finish"
              :startVal="0"
              :endVal="Number(item.finish)"
            ></countTo
          ></span>
          <span
            >{{ item.label2 }}
            <countTo
              v-if="item.finish"
              :startVal="0"
              :endVal="Number(item.unfinish)"
            ></countTo>
          </span>
        </div>
      </div>
    </div>
    <div class="alert-details-bar">
      <div class="full-box shadow-box padding-box" :gutter="20">
        <div class="home-title">红色预警明细</div>
        <div class="bar-wrapper">
          <div
            v-for="item in detailsBar"
            :key="item.key"
            class="alert-details-bar-item"
          >
            <div class="icon-wrapper">
              <i class="iconfont" :class="item.icon"></i>
            </div>
            <div>
              <countTo :startVal="0" :endVal="Number(item.value)"></countTo>
              <!-- <span>{{ item.value }}</span> -->
              <label>{{ item.title }}</label>
            </div>
          </div>
        </div>
      </div>
      <!-- <el-row class="margin-box full-box shadow-box padding-box" :gutter="20">
        <div class="home-title">红色预警明细</div>
        <el-col
          v-for="item in detailsBar"
          :key="item.key"
          :xl="4"
          :lg="6"
          :md="8"
          :offset="0"
        >
          <div class="alert-details-bar-item">
            <div class="icon-wrapper">
              <i class="iconfont" :class="item.icon"></i>
            </div>
            <div>
              <span>{{ item.value }}</span>
              <label>{{ item.title }}</label>
            </div>
          </div>
        </el-col>
      </el-row> -->
    </div>
    <div class="red-alert-group">
      <div class="full-box shadow-box padding-box">
        <div class="home-title">红色预警排名</div>
        <div class="chart-wrapper">
          <div id="redAlertRank"></div>
        </div>
      </div>
      <div class="full-box shadow-box padding-box">
        <div class="home-title">红色预警管理</div>
        <div style="margin-top: 20px" class="table-wrapper">
          <el-table
            height="100%"
            border
            stripe
            :data="redAlertManageTableData"
            :header-cell-style="{
              background: 'rgba(219,242,255,1)',
              color: 'rgba(15,118,253,1)'
            }"
          >
            <el-table-column
              v-for="(col, index) in redAlertManageColumns"
              :prop="col.prop"
              :key="'hfm_' + index"
              :label="col.label"
              :width="col.width"
              :min-width="col.minWidth"
              :align="col.align || 'center'"
            >
              <template slot-scope="scope">
                <span v-if="col.prop == 'description'">
                  <el-popover trigger="hover" placement="top">
                    <div>
                      {{ scope.row[col.prop] }}
                    </div>
                    <div slot="reference" class="name-wrapper">
                      <el-tag type="danger" size="mini">预警规则</el-tag>
                    </div>
                  </el-popover>
                </span>
                <span v-else>
                  {{ scope.row[col.prop] }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="high-frequency-group" v-if="homeRole == 3">
      <div class="full-box shadow-box padding-box">
        <div class="home-title">高频单位</div>
        <div class="chart-wrapper">
          <template v-if="homeRole == 3">
            <div id="highFrequencyDept"></div>
          </template>
        </div>
      </div>
      <div class="full-box shadow-box padding-box">
        <div class="home-title">高频事项</div>
        <div style="margin-top: 20px" class="table-wrapper">
          <el-table
            height="100%"
            border
            stripe
            :data="highFrequencyMattersTableData"
            :header-cell-style="{
              background: 'rgba(219,242,255,1)',
              color: 'rgba(15,118,253,1)'
            }"
          >
            <el-table-column
              v-for="(col, index) in highFrequencyMattersColumns"
              :prop="col.prop"
              :key="'hfm_' + index"
              :label="col.label"
              :width="col.width"
              :min-width="col.minWidth"
              :align="col.align || 'center'"
            >
              <template slot-scope="scope">
                <span v-if="col.prop == 'description'">
                  <el-popover trigger="hover" placement="top">
                    <div>
                      {{ scope.row[col.prop] }}
                    </div>
                    <div slot="reference" class="name-wrapper">
                      <el-tag type="danger" size="mini">预警规则</el-tag>
                    </div>
                  </el-popover>
                </span>
                <span v-else>
                  {{ scope.row[col.prop] }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div style="height: 20px"></div>
  </div>
</template>

<script>
import { cardData, redAlertDetailBar } from '@/mock/dcLeaderHome';

import * as echarts from 'echarts/core';
import ChartEmpty from '@/mixins/ChartEmpty';
import countTo from 'vue-count-to';

export default {
  components: {
    countTo
  },
  mixins: [ChartEmpty],
  props: {
    homeRole: {
      type: [Number, String],
      default: 4
    },
    cardData: {
      type: Array,
      default: () => cardData
    },
    detailsBar: {
      type: Array,
      default: () => redAlertDetailBar
    },
    highFrequencyDept: {
      type: Array,
      default: null
    },
    highFrequencyMatters: {
      type: Array,
      default: null
    },
    redAlertManage: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      chart: {
        highFrequencyDept: null,
        redAlertRank: null
      },
      highFrequencyMattersColumns: highFrequencyMattersColumns,
      highFrequencyMattersTableData: [],
      redAlertManageTableData: [],
      redAlertManageColumns: redAlertManageColumns
    };
  },
  methods: {
    setOptionByHighFrequencyDept() {
      let xAxisData = this.highFrequencyDept.map((i) => {
        return i.name;
      });
      let yAxisData = this.highFrequencyDept.map((i) => {
        return i.num;
      });

      let option = {
        legend: {
          show: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '13%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: xAxisData,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '预警数',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '部门预警数',
            type: 'bar',
            barWidth: '20',
            data: yAxisData,
            // itemStyle: {
            //   color: "rgb(245,108,108)",
            // },
            itemStyle: {
              // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              //   { offset: 0, color: "rgba(0,159,255,0.1)" },
              //   { offset: 1, color: "rgba(0,159,255,1)" },
              // ]),
              color: 'rgba(0,159,255,1)'
            }
          }
        ]
      };

      option && this.chart.highFrequencyDept.setOption(option);
    },
    setOptionByRedAlertRank() {
      let option = this.emptyOptions();

      if (this.homeRole == 3) {
        if (this.highFrequencyMatters && this.highFrequencyMatters.length > 0) {
          let data = this.highFrequencyMatters.map((i) => {
            return {
              name: i.sub_scene,
              value: i.num
            };
          });

          option = {
            series: [
              {
                name: '预警场景',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 2
                },
                // emphasis: {
                //   label: {
                //     show: true,
                //     fontSize: "40",
                //     fontWeight: "bold",
                //   },
                // },
                label: {
                  alignTo: 'edge',
                  minMargin: 5,
                  edgeDistance: 10,
                  lineHeight: 15,
                  formatter: '{b} {c}'
                  // formatter: "{b} : {c} ({d}%)",
                },
                labelLine: {
                  length: 15,
                  length2: 30,
                  maxSurfaceAngle: 80
                },
                data: data
              }
            ]
          };
        }
      }

      if (this.homeRole == 4) {
        if (this.highFrequencyDept && this.highFrequencyDept.length > 0) {
          let min = 0;
          let max = 0;
          this.highFrequencyDept.map((i) => {
            if (i.num > max) {
              max = i.num;
            }

            i.value = i.num;
            return i;
          });

          option = {
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} 预警数：{c}'
            },
            series: [
              {
                left: '10%',
                name: '预警排名',
                type: 'funnel',
                width: '80%',
                min: min,
                max: max,
                minSize: '0%',
                maxSize: '100%',
                sort: 'ascending',
                gap: 2,
                label: {
                  show: true,
                  position: 'inside'
                },
                labelLine: {
                  length: 10,
                  lineStyle: {
                    width: 1,
                    type: 'solid'
                  }
                },
                itemStyle: {
                  borderColor: '#fff',
                  borderWidth: 1
                },
                emphasis: {
                  label: {
                    fontSize: 20
                  }
                },
                data: this.highFrequencyDept
                //     data: [
                //     { value: 60, name: "Visit" },
                //     { value: 40, name: "Inquiry" },
                //     { value: 20, name: "Order" },
                //     { value: 80, name: "Click" },
                //     { value: 100, name: "Show" },
                // ],
              }
            ]
          };
        }
      }

      option && this.chart.redAlertRank.setOption(option);
    }
  },
  mounted() {
    if (this.homeRole == 3) {
      let dom = document.getElementById('highFrequencyDept');
      this.chart.highFrequencyDept = this.$echarts.init(dom);

      window.addEventListener('resize', () => {
        this.chart.highFrequencyDept.resize();
      });

      let dom2 = document.getElementById('redAlertRank');
      this.chart.redAlertRank = this.$echarts.init(dom2);

      window.addEventListener('resize', () => {
        this.chart.redAlertRank.resize();
      });
    }
    if (this.homeRole == 4) {
      let dom2 = document.getElementById('redAlertRank');
      this.chart.redAlertRank = this.$echarts.init(dom2);

      window.addEventListener('resize', () => {
        this.chart.redAlertRank.resize();
      });
    }
  },
  watch: {
    highFrequencyDept(newVal) {
      if (newVal && this.chart.highFrequencyDept) {
        this.$nextTick(() => {
          this.setOptionByHighFrequencyDept();
        });
      }
    },
    highFrequencyMatters(newVal) {
      if (newVal && this.chart.redAlertRank) {
        this.highFrequencyMattersTableData = newVal.map((i, index) => {
          i.sortID = index + 1;
          return i;
        });

        this.$nextTick(() => {
          this.setOptionByRedAlertRank();
        });
      }
    },
    redAlertManage(newVal) {
      if (newVal) {
        this.redAlertManageTableData = newVal.map((i, index) => {
          i.sortID = index + 1;
          return i;
        });
      }
    }
  }
};

const highFrequencyMattersColumns = [
  {
    prop: 'sortID',
    label: '序号',
    width: '50',
    minWidth: '',
    align: ''
  },
  {
    prop: 'sub_scene',
    label: '预警场景',
    width: '',
    minWidth: '200',
    align: ''
  },
  {
    key: 3,
    prop: 'index_name',
    label: '预警监控点',
    width: '',
    minWidth: '200',
    align: ''
  },
  {
    prop: 'description',
    label: '预警规则',
    width: '',
    minWidth: '200',
    align: ''
  },
  {
    prop: 'num',
    label: '发生频次',
    width: '',
    minWidth: '100',
    align: ''
  }
];
const redAlertManageColumns = [
  {
    prop: 'sortID',
    label: '序号',
    width: '50',
    minWidth: '',
    align: ''
  },
  {
    prop: 'object_name',
    label: '项目名称',
    width: '',
    minWidth: '200',
    align: ''
  },
  {
    key: 3,
    prop: 'sub_scene',
    label: '预警场景',
    width: '',
    minWidth: '200',
    align: ''
  },
  {
    prop: 'description',
    label: '预警规则',
    width: '',
    minWidth: '200',
    align: ''
  },
  {
    prop: 'dept_name',
    label: '责任单位',
    width: '',
    minWidth: '150',
    align: ''
  },
  {
    prop: 'assign_status_text',
    label: '办结情况',
    width: '',
    minWidth: '100',
    align: ''
  }
];
</script>

<style lang="scss" scoped>
@import './dc-leader-home.scss';
@import './home.scss';
</style>
